<template>
  <div>
    <div class="header">
      <div class="aa">
        分类
        <span class="iconfont icon-xiazai16"></span>
      </div>
      <div class="bb">
        <span class="iconfont icon-sousuo"></span>
        <span class="iconfont icon-maikefeng"></span>
      </div>
    </div>
    <main>
      <miaodao />
      <div class="big-box">
        <div class="cc">
          <p>我的常用</p>
          <button>编辑</button>
        </div>
        <div class="dd">
          <p></p>
          <b> 您还没有添加常用功能 点击编辑添加 </b>
        </div>
        <div class="ee">
          <img src="img/miaoimg/fenlei/1.gif" alt="" />
        </div>
        <div class="ff">最热</div>
        <div class="gg">最热</div>

        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/2.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/3.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/4.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/5.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/6.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/7.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/8.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/9.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/10.gif" />
          </van-grid-item>
        </van-grid>

        <div class="hh">查询</div>
        <div class="ii">基础查询</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/11.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/12.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/13.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/14.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/15.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/16.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/17.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/18.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/19.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/20.gif" />
          </van-grid-item>
        </van-grid>

        <div class="jj">套餐</div>
        <div class="kk">套餐</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/19.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/20.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/21.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/22.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/23.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/24.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/25.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/26.gif" />
          </van-grid-item>
        </van-grid>

        <div class="ll">流量</div>
        <div class="mm">通用流量</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <router-link to="/qizhe">
              <van-image src="img/miaoimg/fenlei/27.gif" />
            </router-link>
          </van-grid-item>

          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/28.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/29.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/30.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/31.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/32.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/33.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/34.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/35.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/36.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/37.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/38.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/39.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/40.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/41.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/42.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/43.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/44.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/45.gif" />
          </van-grid-item>
        </van-grid>

        <div class="nn">定向流量</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/46.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/47.gif" />
          </van-grid-item>
        </van-grid>

        <div class="oo">定向流量</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/48.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/49.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/50.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/51.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/52.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/53.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/54.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/55.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/56.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/57.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/58.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/59.gif" />
          </van-grid-item>
        </van-grid>
        <div class="pp">卡号</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/51.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/52.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/53.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/54.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/55.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/56.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/57.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/58.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/59.gif" />
          </van-grid-item>
        </van-grid>

        <div class="pp">宽带家庭</div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/51.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/52.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/53.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/54.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/55.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/56.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/57.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/58.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="img/miaoimg/fenlei/59.gif" />
          </van-grid-item>
        </van-grid>
      </div>
    </main>

    <Bottom />
  </div>
</template>

<script>
import miaodao from "@/components/miao/miaodao.vue";

export default {
  components: {
    miaodao,
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.76rem;
  background: white;
  position: fixed;
  z-index: 999;
  margin-top: -0.3rem;
}
.aa {
  width: 3.6rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  margin-left: 0.14rem;
  border-bottom: 2px solid rgb(234, 229, 229);
}
.aa span {
  float: right;
}
.bb {
  width: 3.6rem;
  height: 0.26rem;
  background-color: gainsboro;
  margin-left: 0.14rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 0.26rem;
  margin-top: 0.1rem;
}
.bb span:nth-child(2) {
  float: right;
  margin-right: 0.05rem;
}
main {
  width: 3.7rem;
  height: 5rem;
  display: flex;
  margin-top: 0.2rem;
}
.big-box {
  width: 2.7rem;
  height: 40rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  margin-top: 0.65rem;
}
.cc {
  width: 2.7rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.12rem;
}
.cc p {
  margin-top: 0.15rem;
}
.cc button {
  width: 0.44rem;
  height: 0.25rem;
  margin-top: 0.15rem;
  color: skyblue;
  border-radius: 0.5rem;
  border: 1px solid skyblue;
}
.dd {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.dd p {
  display: block;
  width: 0.68rem;
  height: 0.64rem;
  border: 1px dashed gainsboro;
}
.dd b {
  width: 1.3rem;
  height: 0.3rem;
  font-size: 0.12rem;
  color: gainsboro;
  margin-right: 0.3rem;
  margin-top: 0.1rem;
}
.ee {
  margin-top: 0.2rem;
}
.ee img {
  width: 2.56rem;
}
.ff {
  width: 2.7rem;
  height: 0.28rem;
  font-size: 0.14rem;
  font-weight: 900;
  text-align: center;
  line-height: 0.28rem;
  background: gainsboro;
  margin-top: 0.2rem;
}
.gg {
  width: 0.4rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  border-left: 5px solid blue;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

.van-grid {
  height: 1.5rem;
}
.hh {
  margin-top: 1.5rem;
  width: 2.7rem;
  height: 0.28rem;
  font-size: 0.14rem;
  font-weight: 900;
  text-align: center;
  line-height: 0.28rem;
  background: gainsboro;
}
.ii {
  width: 0.8rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  text-align: left;
  border-left: 5px solid blue;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.jj {
  margin-top: 2.9rem;
  width: 2.7rem;
  height: 0.28rem;
  font-size: 0.14rem;
  font-weight: 900;
  text-align: center;
  line-height: 0.28rem;
  background: gainsboro;
}
.kk {
  width: 0.8rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  text-align: left;
  border-left: 5px solid blue;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.ll {
  margin-top: 1.7rem;
  width: 2.7rem;
  height: 0.28rem;
  font-size: 0.14rem;
  font-weight: 900;
  text-align: center;
  line-height: 0.28rem;
  background: gainsboro;
}
.mm {
  width: 0.8rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  text-align: left;
  border-left: 5px solid blue;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.nn {
  width: 0.8rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  text-align: left;
  border-left: 5px solid blue;
  margin-top: 5.7rem;
  margin-bottom: 0.1rem;
}
.oo {
  width: 0.8rem;
  height: 0.12rem;
  font-size: 0.12rem;
  color: gainsboro;
  text-align: left;
  border-left: 5px solid blue;
  /* margin-top: 1.7rem; */
  margin-bottom: 0.1rem;
}
.pp {
  margin-top: 2.9rem;
  width: 2.7rem;
  height: 0.28rem;
  font-size: 0.14rem;
  font-weight: 900;
  text-align: center;
  line-height: 0.28rem;
  background: gainsboro;
}
</style>